import React, { Component } from 'react'
import {View} from "@tarojs/components";
import Taro from "@tarojs/taro"

import {mediaActivity} from "../api/opinion";
import "./index.less"
import getColorByIndex from "../utils/color";
import Chart from "./charts/charts";




export default class Media extends Component{
  constructor(props) {
    super(props);
    this.state={
      list:[]
    }
  }

  setChartOptions(chart) {
    mediaActivity("2020-10-20","2020-10-26").then(res=>{
      console.log(res)

      const total = res.data.data
      console.log(total)




     const option = {
       color: ['#86E1FF'],
       tooltip: {

         trigger: 'axis',

         position(pos, params, dom, rect, size) {

           if (pos[0] < size.viewSize[0] / 2) {

             return [pos[0], size.viewSize[1] / 3]

           } else {

             return [pos[0] - 100, size.viewSize[1] / 3]

           }

         }

       },
       grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
       },
       xAxis: [
         {
           type: 'category',
           data: total.map(item=>(item.x)),
           nameRotate:0,
           axisTick: {
             alignWithLabel: true,
             interval:0
           },


         },

       ],
       yAxis: [
         {
           type: 'value'
         }
       ],
       series: [
         {
           name: '直接访问',
           type: 'bar',
           barWidth: '60%',
           data: total.map(item=>(item.y))
         }
       ]
     };


      chart.setOption(option);
    })
  }

  render(){
    let height = Taro.pxTransform(350)
    return (
      <View>
        <View className="topTitle">
          媒体活跃度
        </View>
        <Chart setChartOptions={this.setChartOptions.bind(this)} height={height}></Chart>
      </View>
    )
  }
}

